<template>
  <el-dialog
    style="overflow: hidden"
    v-model="aaa"
    title="流程配置"
    width="70%"
    class="notice-dialog"
    @close="closeHandle"
    @close-click-modal="closeHandle"
  >
    <div class="big-box">
      <div v-for="item in processList" :key="item.id" style="display: inline-block; width: 320px; margin: 0 20px">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <img :src="item.imgUrl">
              <span>{{ item.name }}</span>
            </div>
          </template>
          <div class="box-contain">
            <div v-for="v in item.list" :key="v.index" class="text item">
              <el-row :class="{'grey-background': v.type === 'top' }">
                <el-col :span="12">{{ v.title }}</el-col>
                <el-col v-if="v.type == 'top'" :span="12" align="end"
                  ><el-icon><Flag /></el-icon
                ></el-col>
                <el-col v-else :span="12" align="end"
                  ><el-switch v-model="v.value" /></el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <template #footer>
      <el-row>
        <el-col :span="24" align="end">
          <el-button @click="closeHandle">取消</el-button>
          <el-button type="primary" @click="saveHandle"> 保存 </el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>
<script setup>
import oneImg from '@/assets/images/project-control/one.png';
import twoImg from '@/assets/images/project-control/two.png';
import threeImg from '@/assets/images/project-control/three.png';
import fourImg from '@/assets/images/project-control/four.png';
import fiveImg from '@/assets/images/project-control/five.png';
const processVisible = defineProps({
  dialogVisible: Boolean,
});
console.log(processVisible);
const aaa = ref(processVisible.dialogVisible);
watch(
  () => processVisible.dialogVisible,
  (v) => {
    aaa.value = v;
  },
);
const emit = defineEmits(['getProcessValue']);

const processList = ref([
  {
    id: '11',
    name: '审前准备',
    imgUrl: oneImg,
    list: [
      {
        index: 1,
        title: '项目信息',
        type: 'top',
      },
      {
        index: 2,
        title: '项目资料',
        type: 'top',
      },
      {
        index: 3,
        title: '审前分析',
        type: 'normal',
        value: false,
      },
      {
        index: 4,
        title: '项目信息',
        type: 'normal',
        value: true,
      },
      {
        index: 5,
        title: '项目信息',
        type: 'normal',
        value: true,
      },
      {
        index: 6,
        title: '项目信息',
        type: 'normal',
        value: true,
      },
      {
        index: 7,
        title: '项目信息',
        type: 'normal',
        value: true,
      },
      {
        index: 8,
        title: '项目信息',
        type: 'normal',
        value: true,
      },
      {
        index: 9,
        title: '项目信息',
        type: 'normal',
        value: true,
      },
    ],
  },
  {
    id: '22',
    name: '现场实施',
    imgUrl: twoImg,
    list: [
      {
        index: 3,
        title: '实施资料清单',
        type: 'normal',
        value: false,
      },
      {
        index: 4,
        title: '申签工作底稿',
        type: 'normal',
        value: true,
      },
    ],
  },
  {
    id: '44',
    name: '审计报告',
    imgUrl: threeImg,
    list: [
      {
        index: 1,
        title: '审计报告初稿',
        type: 'normal',
        value: false,
      },
      {
        index: 2,
        title: '审计报告审理',
        type: 'normal',
        value: false,
      },
    ],
  },
  {
    id: '55',
    name: '项目结项',
    imgUrl: fourImg,
    list: [
      {
        index: 3,
        title: '问题管理',
        type: 'normal',
        value: true,
      },
    ],
  },
  {
    id: '66',
    name: '档案归档',
    imgUrl: fiveImg,
    list: [
      {
        index: 4,
        title: '项目归档',
        type: 'normal',
        value: true,
      },
    ],
  },
]);

const closeHandle = () => {
  emit('getProcessValue', false);
};
</script>
<style lang="scss" scoped>
img{
  vertical-align: middle;
  height: 20px;
  width: 20px;
  margin-right: 10px;

}
.big-box {
  white-space: nowrap;
  overflow: auto;
  .box-contain {
    height: 53vh;
    overflow: auto;
    .el-row {
      border: 1px dashed #dbddde;
      margin: 20px 10px 0 10px;
      .el-col {
        margin-bottom: 0;
        padding: 8px;
      }
    }
  }
}
.grey-background{
    background: #f3f5f7;
}
.el-card.is-always-shadow {
  border: 1px solid #e8e7ea !important;
  height: 60vh !important;
}
.el-card__header {
  height: 40px;
  background-color: #f5f7fb !important;
  border: 1px solid #e8e7ea;
  padding: 10px!important;
}
.card-header {
  line-height: 0;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.el-switch{
  height: 15px;
}
</style>
